<template>
    <div class="bg">
        <img src="../images/bg.jpg" id="bg">
    </div>
    <group style="width: 1280px;height: 720px;overflow: hidden;" view-locate="center">
        <div class="title" style="left: 40px;top: 40px;">Poster</div>
        <div class="view_bg" style="top: 80px;"></div>

        <group class="group_view" style="top: 80px;" view-locate="center" first-focus id="poster">
            <div class="second_title">medium(图片size：216, 280)</div>
            <poster style="top: 60px;" size-type="medium"></poster>

            <div class="second_title" style="left: 300px;">small(默认 图片size：176, 232)</div>
            <poster style="top: 60px;left: 300px;" ></poster>

            <div class="second_title" style="left: 600px;">mini(图片size：136, 176)</div>
            <poster style="top: 60px;left: 600px;" size-type="mini"></poster>

            <div class="second_title" style="left: 900px;">指定size(图片size：160, 240)</div>
            <poster style="top: 60px;left: 900px;" size="160, 240"></poster>

            <div class="second_title" style="left: 1200px;">定制焦点</div>
            <poster style="top: 60px;left: 1200px;">
                <img src="../images/focus/176x232.png" width="214" view-lazy="0" height="270" id="focus">
            </poster>

            <div class="second_title" style="left: 1500px;">上焦放大</div>
            <div class="second_title" style="left: 1500px;font-size: 12px;top: 30px;">需要留出放大的位置</div>
            <div class="focus_large" style="top: 60px;left: 1500px;">
                <poster focus-enlarge="105"></poster>
            </div>

            <div class="second_title" style="left: 1800px;">默认图片</div>
            <div style="top: 60px;left: 1800px;">
                <poster>
                    <img src="../images/poster.png" id="pic">
                </poster>
            </div>
        </group>

        <div class="title" style="left: 40px;top: 520px;">PosterWhite</div>
        <div class="view_bg" style="top: 560px;"></div>

        <group class="group_view" style="top: 560px;" view-locate="center" id="poster_white">
            <div class="second_title">medium(图片size：216, 280)</div>
            <poster-white style="top: 60px;" size-type="medium"></poster-white>

            <div class="second_title" style="left: 300px;">small(默认 图片size：176, 232)</div>
            <poster-white style="top: 60px;left: 300px;" ></poster-white>

            <div class="second_title" style="left: 600px;">mini(图片size：136, 176)</div>
            <poster-white style="top: 60px;left: 600px;" size-type="mini"></poster-white>

            <div class="second_title" style="left: 900px;">指定size(图片size：160, 240)</div>
            <poster-white style="top: 60px;left: 900px;" poster-size="160, 240"></poster-white>

            <div class="second_title" style="left: 1200px;">定制焦点</div>
            <poster-white style="top: 60px;left: 1200px;">
                <img src="../images/focus/176x277.png" width="214" view-lazy="0" height="305" id="focus">
            </poster-white>

            <div class="second_title" style="left: 1500px;">上焦放大</div>
            <div class="second_title" style="left: 1500px;top: 30px;">需要留出放大的位置</div>
            <div class="focus_large" style="top: 60px;left: 1500px;">
                <poster-white focus-enlarge="105"></poster-white>
            </div>

            <div class="second_title" style="left: 1800px;">默认图片、定制文字</div>
            <div style="top: 60px;left: 1800px;">
                <poster-white>
                    <img src="../images/poster.png" id="pic">
                    <text style="color: red;text-align: center;" id="name">默认name</text>
                </poster-white>
            </div>
        </group>

        <div class="title" style="left: 40px;top: 1000px;">PosterShadow</div>
        <div class="view_bg" style="top: 1040px;"></div>

        <group class="group_view" style="top: 1040px;" view-locate="center" id="poster_shadow">
            <div class="second_title">medium(图片size：216, 280)</div>
            <poster-shadow style="top: 60px;" size-type="medium"></poster-shadow>

            <div class="second_title" style="left: 300px;">small(默认 图片size：176, 232)</div>
            <poster-shadow style="top: 60px;left: 300px;" ></poster-shadow>

            <div class="second_title" style="left: 600px;">mini(图片size：136, 176)</div>
            <poster-shadow style="top: 60px;left: 600px;" size-type="mini"></poster-shadow>

            <div class="second_title" style="left: 900px;">指定size(图片size：160, 240)</div>
            <poster-shadow style="top: 60px;left: 900px;" size="160, 240"></poster-shadow>

            <div class="second_title" style="left: 1200px;">定制焦点</div>
            <poster-shadow style="top: 60px;left: 1200px;">
                <img src="../images/focus/176x232.png" width="214" view-lazy="0" height="270" id="focus">
            </poster-shadow>

            <div class="second_title" style="left: 1500px;">定制阴影</div>
            <poster-shadow style="top: 60px;left: 1500px;">
                <div style="background: black;opacity: 0.4;width: 176px;height: 80px;" height="270" id="shadow"></div>
            </poster-shadow>

            <div class="second_title" style="left: 1800px;">上焦放大</div>
            <div class="second_title" style="left: 1800px;font-size: 12px;top: 30px;">需要留出放大的位置</div>
            <div class="focus_large" style="top: 60px;left: 1800px;">
                <poster-shadow focus-enlarge="105"></poster-shadow>
            </div>

            <div class="second_title" style="left: 2100px;">默认图片、定制文字</div>
            <div style="top: 60px;left: 2100px;">
                <poster-shadow>
                    <img src="../images/poster.png" id="pic">
                    <text style="color: red;text-align: center;" id="name">默认name</text>
                </poster-shadow>
            </div>
        </group>

        <div class="title" style="left: 40px;top: 1480px;">Poster拓展</div>
        <div class="view_bg" style="top: 1520px;"></div>

        <group class="group_view" style="top: 1520px;" view-locate="center" id="poster_expand">
            <div class="second_title">Poster带额外信息</div>
            <div class="poster_info" style="top: 60px;">
                <poster></poster>
                <div class="info" style="left: 8px;width: 166px;top: 205px">这是一段额外的信息</div>
            </div>

            <div class="second_title" style="left: 300px;">PosterWhite带额外信息</div>
            <div class="poster_info" style="top: 60px;left: 300px;">
                <poster-white></poster-white>
                <div class="info" style="left: 8px;width: 166px;top: 205px">这是一段额外的信息</div>
            </div>

            <div class="second_title" style="left: 600px;">PosterShadow带额外信息</div>
            <div class="poster_info" style="top: 60px;left: 600px">
                <poster-shadow></poster-shadow>
                <div class="info" style="left: 8px;width: 166px;top: 175px">这是一段额外的信息</div>
            </div>

            <div class="second_title"  style="left: 900px;">Poster带icon</div>
            <div class="poster_info" style="top: 60px;left: 900px;">
                <poster></poster>
                <div class="icon" style="left: 13px;top: 13px">
                    <img src="../images/icon/icon_free.png">
                </div>
            </div>

            <div class="second_title" style="left: 1200px;">PosterWhite带icon</div>
            <div class="poster_info" style="top: 60px;left: 1200px;">
                <poster-white></poster-white>
                <div class="icon" style="left: 13px;top: 13px">
                    <img src="../images/icon/icon_vip.png">
                </div>
            </div>
        </group>
    </group>
</template>
